<template>
  <div class="contents">
        <el-card class="box-card" shadow="always">
      <div class="second">
          <el-row type="flex" justify="space-between">
          <el-col :span="10">
                <el-button type="primary" size="small " icon="el-icon-circle-plus" @click="addlog()" >新增</el-button>
                <el-button type="danger" size="small " icon="el-icon-delete" :disabled="isDisabled"
                          @click.native.prevent="popDelete()" >批量删除</el-button>
          </el-col>
          <el-col :span="14">
            <div class="but">
             <el-form :inline="true" :model="listQuery" size="small">
            <el-form-item >
              <el-input clearable @clear="clearMethod" size="small " v-model="listQuery.userid"
              placeholder="输入关键字搜索"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success"  size="small " icon="el-icon-search" @click="onQuery()"
              >查询</el-button>
          </el-form-item>
        </el-form>
              </div></el-col>
          </el-row>
      </div>
    <el-table :data="list" style="width: 100%" stripe border ref="multipleTable"
              tooltip-effect="dark" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <el-table-column prop="userid" label="用户id" align="center" width="80">
      </el-table-column>
      <el-table-column prop="workdate" label="工作日期"  align="center" >
      </el-table-column>
      <el-table-column prop="worksummary" label="工作总结">
      </el-table-column>
      <el-table-column prop="mobile" label="电话号码" align="center">
      </el-table-column>
      <el-table-column prop="submitdate" label="提交时间" align="center">
      </el-table-column>
      <el-table-column prop="isauth" label="审核状态" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          </el-button>
          <el-button type="primary" icon="el-icon-edit" title="单编辑" circle
                      @click.native.prevent="EditRow(scope.row)">
          </el-button>
          <el-button type="danger" icon="el-icon-delete" title="删除" circle
                      @click.native.prevent="DelAction(scope.row)" >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <!-- ====================主表格 分页===================== -->
      <el-col :span="20">
        <div>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="listQuery.pageSize"
            :page-sizes="[8, 15]"
            :pager-count="5"
            :current-page.sync="listQuery.pageNum"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
        <!-- ======================主表格 弹框===============---------- -->
        <el-dialog :visible.sync="multiAddVisible" :title="addtitle" width="35%" customClass="dialogClass"
                    :showClose="false">
        <el-form label-width="100px" :model="Log" :rules="LogRules" ref="form">
              <el-form-item label="字典名称：" prop="name">
                <el-input size="small" v-model="Log.name"></el-input>
              </el-form-item>
              <el-form-item label="描述：" prop="description">
                <el-input size="small" v-model="Log.description"></el-input>
              </el-form-item>
        </el-form>
            <span slot="footer">
              <el-button round type="info" icon="el-icon-circle-close" @click="popupCancel()">取 消</el-button>
              <el-button round type="primary" icon="el-icon-circle-check" @click="onSubmit('form')">提 交</el-button>
            </span>
          </el-dialog>
        </el-card>
  </div>
</template>

<script>
import {
  fetchList, //查询
  deleteLog,//删除

} from "@/api/worklog";



export default {

  data() {
    return {
      addtitle: "新增字典",
      uptitle: "新增字典详情",
      search: '',
      checkedName: true,
      checkedDescribe:true,
      checkedHandle:true,
      isDisabled: true, //是否禁用确定按钮
      multiAddVisible:false,
      AddVisible:false,
      isShow:true,
      isShowName:true,
      isShowDescribe:true,
      hintIsShow:true,
      tableIsShow:false,
      arr:[{}],
      Log:{
        LogId:null,
        name:null,
        description:null,
        createdBy:null,
      },
      detail:{
        detailId:null,
        LogId:null,
        label:null,
        value:null,
      },
      listQuery: {
        pageNum: 1,
        pageSize: 8
      },
      form: {
        name: ""
      },
      listQuery2: {
        LogId:null,
        pageNum: 1,
        pageSize: 6
      },
      delArrParam: {
        ids: null
      },
      total: null,
      totals: null,
      list: null,
      list2:null,
      rows: null,
      allid:'',
      sonid:'',
    };
  },
  created() {
    this.getList();
  },


  methods: {
    // 获取选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.multipleSelection.length == 0) {
        this.isDisabled = true;
      }else{
        this.isDisabled = false;
      }
    },

      //新增
    addlog() {
      // alert(row);
      // this.$router.push("/interview/add?id=" + row.infoId+"&isEdit=1");
      this.$router.push("/worklog/redact");
    },

     //修改
    EditRow(row) {
      // alert(row);
      // this.$router.push("/worklog/redact?id=" + row.id+"&isEdit=1");
      this.$router.push("/worklog/redact?id=" + row.id);
    },

    //主表编辑修改
    // EditRow(row) {
    //   this.multiAddVisible=true;  //显示弹框
    //   this.addtitle="修改字典";
    //   this.Log = row;         //row当前行数据，把当前行的数据赋值给 表单
    //   this.allid = row.id;     //把id存全局
    // },


    //主表单删除
    DelAction(row) {
      console.log("==================");
      alert(row.id);
      this.$confirm("是否要删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteLog(row.id).then(response => {
          if (response.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1000,
            });
            this.getList();
          } else {
            this.$message({
              showClose: true,
              message: "警告，这条数据删除失败！",
              type: "warning",
              duration: 1000
            });
          }
        });
      });
    },

    //主表GET批量删除
    popDelete() {
      this.rows = this.multipleSelection; // multipleSelection存储了勾选到的数据
      console.log("====33"+this.rows);
      let arr = [];
      let ids_str = "";
      this.rows.forEach(function(item) {
        arr.push(item.LogId);
        ids_str += item.LogId + ",";
      });
      ids_str = ids_str.substring(0, ids_str.length - 1);
      console.log(ids_str);
      this.delArrParam.ids = ids_str;
      this.$confirm("是否要删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteLogBatch(this.delArrParam).then(response => {
          console.log(response);
          if (response.code == 200) {
            this.getList();
            this.$message({
              message: "删除数据成功",
              type: "warning"
            });
          } else {
            this.$message.error("删除数据失败");
          }
        });
      });
    },


    // 主表分页
    getList() {
      fetchList(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.records;
        this.arr = response.data.records;
        this.total = response.data.total;
        this.totalPage = response.data.pages;
        this.pageSize = response.data.size;
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },


    //条件查询
    onQuery() {
      this.getList();
    },

    //搜索清除数据
    clearMethod() {
      this.listQuery.description = null;
      this.listQuery.name = null;
    },

  }
};
</script>



<style>
.contents {
  width: 97%;
  margin: 1% 1.5% 0 1.5%;
}
.box-card {
  width: 100%;
}

.second{
    margin-bottom: 3%;
}

.but{
    text-align: right;
}
.dialogClass{
  border-radius: 20px;
}

.hint{
  border: 1px solid whitesmoke;
  padding-left: 20px;
  line-height: 100px;
  border-radius: 4px;
  height: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

</style>
